﻿@using qkview.Models;
@model IEnumerable<qkview.Models.Note>

@{
    ViewBag.Title = ViewBag.BoardTitle + " - QKView";
}
@if (!@ViewBag.IsEdit)
{
<div id="disqusdiv" style="float:right">
       <a id="showComments" style="font-size:1.2em;line-height:1.6em;padding:5px 20px;font-weight:normal" class="linkButton" href="#disqus_thread">Show Comments</a>
</div>
}

<h1>@ViewBag.BoardTitle</h1>
<p class="boardDesc">
    @ViewBag.BoardDescription
</p>

@if (@ViewBag.IsEdit)
{


    var setting = Common.GetUserSetting();
        


    <script type="text/javascript">

        var config = {

            boardID: '@ViewBag.BoardID',
            tn : @setting.TotalNotes,
            ts : @setting.TotalSection,
            themes : {},
            nicimg:'../Scripts/NickEdit/nicEditorIcons.gif'
        };

    
       
    </script>
    <div id="loadingDiv"><img src="~/Images/loader.gif" /></div>
            
    <div>
        <a class="linkButton" data-bind="click: addNote, visible:allowToAddNote">Add Note</a>
        <a class="linkButton" data-bind="click: addCustomNote, visible:allowToAddNote">Add Custom Note</a>
        <a target="_blank" class="linkButton" href="@Url.RouteUrl("Note", new { username = @User.Identity.Name, boardurl = @ViewBag.BoardURL })">View</a>
    </div>
    <p class="error" data-bind="text: error"></p>
    <div class="content" style="display: none;" data-bind="foreach: {data:notes, afterRender : window.noteApp.noteViewModel.setMasonary }">
        <article class="qknote" data-bind="style:{backgroundColor : ColorCode }">
            <p class="error" data-bind="text: ErrorMessage"></p>
            <a href="#" class="deletelist" data-bind="click: $parent.deleteNote">X</a>

            <!-- ko if: NoteTypeID() === 1 -->

            <div class="noteHeader" data-bind="css: { dirty: isNoteDirty }">
                <textarea class="inputH1" data-bind="jqAutoresize: {} ,value: Title, selected:IsEditingListTitle, blurOnEnter: true, placeholder:'Note Title...' "></textarea>
                <textarea class="noteDesc" data-bind="jqAutoresize: {},value: Description, blurOnEnter: true, placeholder:'Note Description...'"></textarea>
            </div>
            <div class="listinfo" data-bind="foreach: Sections">
                <section data-bind="css: { dirty: dirtyFlag.isDirty }">
                    <p class="error" data-bind="text: ErrorMessage"></p>
                    <a href="#" class="deletesection" data-bind="click: $parent.deleteSection">X</a>
                    <textarea class="inputH2" data-bind="jqAutoresize: {},value: Title, selected:IsEditingListTitle"></textarea>
                    <textarea class="inputP" data-bind="jqAutoresize: {},value: Summary"></textarea>
                    @if (setting.AdvSecDescription)
                    {
                        <a href="#" data-bind="click: $root.editDescription" class="sectionEditMore">More</a>
                    }
                </section>
            </div>
            <div class="noteFooter">
                @* <!-- for debug dirty items array--> 
                <div data-bind="text: ko.toJSON(dirtyItems)"></div> *@
                <a href="#" data-bind="click: addSection, visible: allowToAddSection" class="addSection"><span style="font-weight: bold; font-size: 16px">+</span> Add Topic</a>
                <a href="#" data-bind="visible: isDirty, click: saveSection" class="saveSection"><span style="font-weight: bold; font-size: 16px">></span> Save</a>
                <ul class="themeHolder" data-bind="foreach:themes">
                    <li data-bind="style: { backgroundColor: ColorCode }, click : $parent.changeTheme "></li>
                </ul>
                @*<a href="#" data-bind="click: undoNote">Reset</a> *@
            </div>
            <!-- /ko -->
            <!-- ko if: NoteTypeID() === 2 -->
            <div class="noteHeader" data-bind="css: { dirty: isNoteDirty }">
                <textarea class="inputH1" data-bind="jqAutoresize: {} ,value: Title, selected:IsEditingListTitle, blurOnEnter: true, placeholder:'Note Title...' "></textarea>
            </div>
            <div class="listinfo">
                <div class="noteDesc" data-bind="jqNEdit:$index(), value: Description" style="padding-top: 1em;"></div>
            </div>
            <div class="noteFooter">
                @* <!-- for debug dirty items array--> *@

                <a href="#" data-bind="visible: isDirty, click: saveCustomNote" class="saveSection saveButton" style="display: block; float: left">Save</a>
                <div class="editorpanel"></div>
                <ul class="themeHolder" data-bind="foreach:themes">
                    <li data-bind="style: { backgroundColor: ColorCode }, click : $parent.changeTheme "></li>
                </ul>
                @*<a href="#" data-bind="click: undoNote">Reset</a> *@
            </div>
            <!-- /ko -->
        </article>
    </div>
    <div id="dialog" title="More Details"
        data-bind="jqDialog: { 'autoOpen': false, 'resizable': false, 'modal': true, 'width': '60%' }, template: { 'name': 'descTmpl', 'data': selectedSection, if: selectedSection }, openDialog: selectedSection">
    </div>
    <script id="descTmpl" type="text/html">
        <textarea id="dialogEditor" rows="10" style="width: 100%" class="htmlEditor" placeholder="Type Note..." data-bind="value: Description"></textarea>
        <button data-bind="jqButton: {}, click: acceptDescription">OK</button>
        <button data-bind="jqButton: {}, click: cancelDescription">Cancel</button>
    </script> 
    
    
    @section header{
        <meta name="description" content="@ViewBag.BoardDescription" />
        <meta name="keywords" content="@ViewBag.BoardTitle,QKView, quick view, note, quick reference guide" />

    }
    
    
    
    @section scripts {
        @Scripts.Render("~/bundles/jqueryui")
        @* text area autosize *@
        <script src="~/Scripts/app/jquery.autosize-min.js"></script>

        @Scripts.Render("~/bundles/knockout")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/note")

        @* pinterest like auto adjust of notes to use proper vertical space  *@
        <script src="~/Scripts/app/jquery.masonry.min.js"></script>
        <script>
            $('#loadingDiv')
.hide()  // hide it initially
.ajaxStart(function() {
    $(this).show();
})
.ajaxStop(function() {
    $(this).hide();
})
            ;

        </script>

    }
}
else
{
    
    <div class="metaBar">
        <div id="socialBar">
            @Html.Partial("_SocialShare") 
        </div>
        <div class="author">
            QKView by <a href="@Url.RouteUrl("Board", new { username = @ViewBag.UserName }) ">@ViewBag.DisplayName</a>
        </div>
        
    </div>
    <div class="content">
        @foreach (var item in Model)
        {
            <article class="qknote" style="background-color:@(item.Theme == null ? Common.DefaultColorCode : item.Theme.ColorCode)">
                <div class="noteHeader">
                    <h2>@Html.DisplayFor(modelItem => item.Title)</h2>


                    @if (!item.NoteTypeID.HasValue || item.NoteTypeID.Value == 1)
                    {
                        <p class="noteDesc">@Html.DisplayFor(modelItem => item.Description)</p>
                    }
                </div>
                <div class="listinfo">
                    @if (item.NoteTypeID.HasValue && item.NoteTypeID.Value == 2)
                    {
                        <div class="noteDesc" style="padding-top: 1em;">@Html.Raw(item.Description)</div>
                    }
                    else
                    {
                        foreach (var sec in item.Sections)
                        {

                        <section>
                            <h3>@sec.Title</h3>
                            <p class="sectionDesc">@sec.Summary
                                @if (sec.Description != null && sec.Description.Length > 0)
                                {
                                    <a href="#" data-title="@sec.Title" data-url="@(Request.RawUrl + "/" + sec.URLSlug)" class="moreContent">More...</a>
                                }
                            </p>
                        </section>
                        }
                    }
                </div>
                <div id="moreDialog"></div>
            </article>
        }
    </div>  
    <div id="disqus_thread"></div>
    
     
    @section header{
        <meta name="description" content="@ViewBag.BoardDescription" />
        <meta name="keywords" content="@ViewBag.BoardTitle" />
    }
    @section scripts {
        @Scripts.Render("~/bundles/jqueryui")
        @* pinterest like auto adjust of notes to use proper vertical space  *@
        <script src="~/Scripts/app/jquery.masonry.min.js"></script>

        <script type="text/javascript">
            $(function () {

                //display dialog on More link click
                $(".moreContent").click(function (e) {
                    e.preventDefault();
                    JQDialog($(this).data('title'), $(this).data('url'), null);
                });


                //To open dialog, load conent from URL  
                function JQDialog(title, contentUrl, params) {                  
                    var dialog1 = $("#moreDialog").dialog(
                    {
                        autoOpen: false,
                        modal: true,
                        width:'60%',
                        height :550,
                        title: title,
                        close: function (e, ui) {
                            $(this).dialog("close");
                            //$(this).remove();
                        },
                        buttons: { "OK": function () { $(this).dialog("close"); } }
                    });

                    dialog1.load(contentUrl, function () {
                        $(this).dialog('open');
                    });

                }

                var $container = $('.content');
                $container.imagesLoaded(function () {
                    $container.masonry({
                        //columnWidth: function( containerWidth ) {
                        //    return containerWidth / 4;
                        //},
                        //                   gutterWidth: 5,
                        itemSelector: '.qknote',
                        isFitWidth: true,
                        //                   columnWidth: 100,
                        isAnimated: true
                    });
                });

                //display disqus comments
                 @{ 
                        var urlForDisqus = Request.Url.Scheme + System.Uri.SchemeDelimiter + Request.Url.Host + (Request.Url.IsDefaultPort ? "" : ":" + Request.Url.Port) + Url.RouteUrl("Note", new { username = @ViewContext.RouteData.Values["username"], boardurl = @ViewContext.RouteData.Values["boardurl"] });
                  }
                $('#showComments').click(function() {
                    var hidediv = document.getElementById('disqusdiv');
                    hidediv.style.display = 'none';
                    var disqus_shortname = 'qkview';   
                    var disqus_identifier = '@urlForDisqus';
                    var disqus_url = '@urlForDisqus';                  

                    (function () {
                        var dsq = document.createElement('script');
                        dsq.type = 'text/javascript';
                        dsq.async = true;
                        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                    })();
                });
            });
            
        </script>

    }
    
}

